<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div class="row">
    <div class="col-xs-12 col-sm-7 col-md-7 col-lg-4">
        <h1 class="page-title txt-color-blueDark">
            <i class="fa fa-table fa-fw "></i>
            监控列表
            <span>>
				服务列表
			</span>
        </h1>
    </div>
    <div class="col-xs-12 col-sm-5 col-md-5 col-lg-8">
        <ul id="sparks" class="">
            <li class="sparks-info">
                <h5> My Income <span class="txt-color-blue">$47,171</span></h5>
                <div class="sparkline txt-color-blue hidden-mobile hidden-md hidden-sm">
                    1300, 1877, 2500, 2577, 2000, 2100, 3000, 2700, 3631, 2471, 2700, 3631, 2471
                </div>
            </li>
            <li class="sparks-info">
                <h5> Site Traffic <span class="txt-color-purple"><i class="fa fa-arrow-circle-up"
                                                                    data-rel="bootstrap-tooltip" title="Increased"></i>&nbsp;45%</span>
                </h5>
                <div class="sparkline txt-color-purple hidden-mobile hidden-md hidden-sm">
                    110,150,300,130,400,240,220,310,220,300, 270, 210
                </div>
            </li>
            <li class="sparks-info">
                <h5> Site Orders <span class="txt-color-greenDark"><i class="fa fa-shopping-cart"></i>&nbsp;2447</span>
                </h5>
                <div class="sparkline txt-color-greenDark hidden-mobile hidden-md hidden-sm">
                    110,150,300,130,400,240,220,310,220,300, 270, 210
                </div>
            </li>
        </ul>
    </div>
</div>

<!-- widget grid -->
<section id="widget-grid" class="">

    <!-- row -->
    <div class="row">

        <!-- NEW WIDGET START -->
        <article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

            <!-- Widget ID (each widget will need unique ID)-->
            <div class="jarviswidget jarviswidget-color-darken" id="wid-id-0" data-widget-editbutton="false">
                <!-- widget options:
                usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">

                data-widget-colorbutton="false"
                data-widget-editbutton="false"
                data-widget-togglebutton="false"
                data-widget-deletebutton="false"
                data-widget-fullscreenbutton="false"
                data-widget-custombutton="false"
                data-widget-collapsed="true"
                data-widget-sortable="false"

                -->
                <header>
                    <span class="widget-icon"> <i class="fa fa-table"></i> </span>
                    <h2>服务列表</h2>

                </header>

                <!-- widget div-->
                <div>

                    <!-- widget edit box -->
                    <div class="jarviswidget-editbox">
                        <!-- This area used as dropdown edit box -->
                    </div>
                    <!-- end widget edit box -->

                    <!-- widget content -->
                    <div class="widget-body no-padding">
                        <table id="dt_basic" class="table table-striped table-bordered table-hover" width="100%">
                            <thead>
                            <tr>
                                <th data-class="expand"><i
                                        class="fa fa-fw fa-user text-muted hidden-md hidden-sm hidden-xs"></i>服务
                                </th>
                                <th data-hide="phone"><i
                                        class="fa fa-fw fa-phone text-muted hidden-md hidden-sm hidden-xs"></i>节点数
                                </th>
                                <th data-hide="phone"><i
                                        class="fa fa-fw fa-car text-muted hidden-md hidden-sm hidden-xs"></i>客户端数
                                </th>
                                <th data-hide="phone,tablet"><i
                                        class="fa fa-fw fa-map-marker txt-color-blue hidden-md hidden-sm hidden-xs"></i>
                                    说明
                                </th>
                                <th data-hide="phone,tablet"><i
                                        class="fa fa-fw fa-calendar txt-color-blue hidden-md hidden-sm hidden-xs"></i>
                                    操作
                                </th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                    <!-- end widget content -->
                </div>
                <!-- end widget div -->
            </div>
            <!-- end widget -->
        </article>
        <!-- WIDGET END -->

    </div>

    <!-- end row -->

    <!-- end row -->

</section>
<!-- end widget grid -->
<script type="text/javascript">
    pageSetUp();

    function delService(obj) {
        $.get($(obj).attr("url"), {}, function (result) {
            if (result.success) {
                $('#dt_basic').DataTable().ajax.reload();
            } else {
                alert(result.msg);
            }
        });
    }
    function serviceDetail(obj) {
        refreshLocation($(obj).attr("url"));
    }

    var pagefunction = function () {
        /* BASIC ;*/
        var responsiveHelper_dt_basic = undefined;
        var responsiveHelper_datatable_fixed_column = undefined;
        var responsiveHelper_datatable_col_reorder = undefined;
        var responsiveHelper_datatable_tabletools = undefined;

        var breakpointDefinition = {
            tablet: 1024,
            phone: 480
        };

        var table = $('#dt_basic').dataTable({
            dom: "<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-12 hidden-xs'l>r>" +
            "t" +
            "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>",
            "oLanguage": {
                "sSearch": '<span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>'
            },
            "preDrawCallback": function () {
                // Initialize the responsive datatables helper once.
                if (!responsiveHelper_dt_basic) {
                    responsiveHelper_dt_basic = new ResponsiveDatatablesHelper($('#dt_basic'), breakpointDefinition);
                }
            },
            "rowCallback": function (nRow) {
                responsiveHelper_dt_basic.createExpandIcon(nRow);
            },
            "drawCallback": function (oSettings) {
                responsiveHelper_dt_basic.respond();
            },
            "ajax": "/soa/reg",
            "iDisplayLength": 10,
            "aLengthMenu": [10, 25, 50, 100],
            "columns": [
                {"data": "name", "width": "40%"},
                {"data": "providers", "width": "10%"},
                {"data": "consumes", "width": "10%"},
                {"data": "comment"},
                {"data": "make"}
            ],
            columnDefs: [
                {
                    targets: 3,
                    "render": function (data, type, row, meta) {
                        if (!row.comment) {
                            return "";
                        } else {
                            return row.comment;
                        }
                    }
                },
                {
                    targets: 2,
                    "render": function (data, type, row, meta) {
                        return '<a style="cursor:pointer" onclick="serviceDetail(this)" url="/ajax/client-detail?from=services&service=' + row.name + '">' + row.consumes + '</a>';
                    }
                },
                {
                    targets: 4,
                    "render": function (data, type, row, meta) {
                        if (row.providers > 0) {
                            return '<a onclick="serviceDetail(this)" url="/ajax/service-detail?service=' + row.name + '" class="btn btn-primary btn-xs">查看</a>';
                        }
                        return '<a onclick="delService(this)" url="/soa/reg/delete?service=' + row.name + '" class="btn btn-danger btn-xs">删除</a>';
                    }
                }
            ]
        });
    };

    // load related plugins

    loadScript("/static/js/plugin/datatables/jquery.dataTables.min.js", function () {
        loadScript("/static/js/plugin/datatables/dataTables.bootstrap.min.js", function () {
            loadScript("/static/js/plugin/datatable-responsive/datatables.responsive.min.js", pagefunction)
        });
    });


</script>
